<template>
	<view class="page" :style="{'height':h+'px'}">
		<c-nav-bar title="我的打卡"></c-nav-bar>
		<view class="u-demo-block" :style="{'margin-top':mt+'px'}">
			<view class="u-demo-block__content">
				<view class="album" v-for="(item,index) in CheckList" :key="index">
					<view class="album__content" @click="detail(item)">
						<view class="time">{{item.createDate.substring(0,10)}}</view>
						<view class="info">
							<image class="img" :src="item.pic[0]" mode="aspectFill"></image>
							<view class="right">
								<view class="title">{{item.attractionName}}</view>
								<view class="content">{{item.content}}</view>
							</view>
						</view>
					</view>
				</view>
				<view style="background:#F5F8FA;padding-bottom: 10vh;" v-if="CheckList.length ==0">
					<nodata></nodata>
				</view>
			</view>
			<!-- <view v-if="CheckList.length==0" class="zanwudaka">
				暂无打卡记录
			</view> -->
		
		</view>
	</view>
	</view>
</template>

<script>
	import nodata from '@/compoments/NoData/index.vue'
	export default {
		components: {
			nodata
		},
		data() {
			return {
				h: uni.getSystemInfoSync().windowHeight,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				CheckList: [],
				myuserId: '',
				albumWidth: 0,

			}
		},
		onLoad(option) {
			//this.getdata()
		},
		onShow() {
			if (uni.getStorageSync('userInfo')) {
				this.myuserId = JSON.parse(uni.getStorageSync('userInfo')).id;
				this.getdata()
			}
		},
		methods: {
			detail(item) {
				let val = JSON.stringify(item);
				uni.navigateTo({
					url: '/pagesMy/myclockin/detail?item=' + val
				})
			},
			getdata() {
				this.$api.get('/api/wisdom/selectIsMapClockin', {
					userId: this.myuserId
				}).then(res => {
					if (res.data.code == 0) {
						if (res.data.data.length == 0) {
							this.CheckList = [];
						} else {
							for (let i = 0; i < res.data.data.length; i++) {
								res.data.data[i].pic = res.data.data[i].pic.split(',')
							}
							// console.log('111111111111111111', res.data.data)
							this.CheckList = res.data.data;
						}


					} else {
						this.$showModal(res.data.msg);
					}

				})
			}

		}
	}
</script>

<style lang="scss">
	.zanwudaka{
		width: 750rpx;
		font-size: 30rpx;
		text-align: center;
		margin-top: 50vh;
		font-weight: bold;
	}
	.page {
		width: 750rpx;
		background-color: #F5F8FA;
	}

	.album__content {
		padding: 0 24rpx;
		width:100%;

		.time {
			padding: 40rpx 0 24rpx;
			font-size: 26rpx;
			color: #333;
			font-weight: bold;
		}

		.info {
			background-color: #fff;
			padding: 24rpx;
			display: flex;
			align-items: center;
			border-radius: 16rpx;

			.img {
				width: 200rpx;
				min-width: 200rpx;
				margin-right: 20rpx;
				height: 148rpx;
			}
			.right{
				width:200rpx;
				flex:1;
			}
			.title {
				font-size: 32rpx;
				color: #333;
				margin-bottom: 20rpx;
				font-weight: bold;
			}

			.content {
				color: #666;
				font-size: 24rpx;
				line-height: 40rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box; //使用自适应布局
				-webkit-line-clamp: 2; //设置超出行数，要设置超出几行显示省略号就把这里改成几
				-webkit-box-orient: vertical;
			}

		}
	}




	.album {
		@include flex;
		align-items: flex-start;

		&__avatar {
			background-color: $u-bg-color;
			padding: 5px;
			border-radius: 3px;
		}
	}
</style>